<script setup lang="ts">
defineOptions({
  name: 'IndexPage',
})

const { api } = useConfig()
const problemType = ref('1')

const checked = ref(true)

const statisticsUrl = computed(() => `${api}/lego/v1/open/api/statistics?problemType=${problemType.value}`)

const { data: statistics } = useFetch(statisticsUrl, {
  refetch: true,
}).get().json<Home.ResultData<Home.Statistic>>()

const { data: { data: enterprise } } = useFetch(`${api}/lego/v1/open/api/enterprise/list?streetCode=32041204`).json()
useFetch(`${api}/lego/v1/open/api/riverDischargeOutlet/list?streetCode=32041204`).json()

const checkbox = ref()

const filterBox = ref(['1'])

watch(checkbox, (val) => {
  console.log(val)
})
watch(checked, (val) => {
  console.log(val)
})
watch(checked, (val) => {
  console.log(val)
})
// const { data: { data: { list: mapList } } } = useFetch(`${api}/lego/v1/open/api/map/list?streetCode=32041204`).json()
// const map = ref()
// const zoom = 12
// function onLoad() {
//   // @ts-expect-error we has T in html script
//   map.value = new T.Map('mapDiv')
//   // @ts-expect-error we has T in html script
//   map.value.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom)
// }
// onMounted(onLoad)
</script>

<template>
  <!-- <div id="mapDiv" h-full w-full /> -->

  <Select v-model="filterBox" :options="[{ label: '1', value: '1' }]" />
  <CheckBox v-model="checkbox" label="213" />
  <Switch v-model="checked" />
  <TheInput v-model.lazy="problemType" />
</template>
